<template>
  <!-- <div>111</div> -->
  <div class="game_currency_aio">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex"
             justify="start"
             class="search-item-left">
          <Col class="search-item"><span class="search-label"
                style="line-height:36px;">门店名称：</span>
          <div style="display: inline-block;">
            <!-- <vueTreeselectChoice :max-tag-count='1'
                                 componentsType='iselect'
                                 :filterable="true"
                                 @on-change="handleShop"
                                 permissionCode="moms:report:basicanalytics"
                                 @on-api-finish="apiFinish"
                                 v-model="searchObj.shopId"></vueTreeselectChoice> -->
          </div>
          </Col>
          <Col class="search-item">
          <treeselect :options="options"
                      @select="selectListd"
                      class='input-wid'
                      :clearable="clearable"
                      :disable-branch-nodes="true"
                      style='width:180px'
                      :normalizer="normalizer"
                      noResultsText="未搜索符合的门店"
                      noOptionsText="门店为空"
                      placeholder="请选择门店"
                      v-model='searchObj.shopId' />
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  type='primary'
                  @click="search">查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  @click="reset">重置</Button>
          </Col>
        </Row>
        <Row type="flex"
             justify="end"
             class="search-item-right">
          <Col class="search-item">
          <Button class="search-btn"
                  type="primary"
                  @click="skipAdd">上架</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Table stripe
           class="table-list"
           :columns="columns"
           :data="tableData"
           :loading="loading"
           :height="tableHeight">
      <template slot-scope="{ row }"
                slot="shopName">
        <span style="cursor:pointer;color:rgb(45, 140, 240);"
              @click="jump(row)">{{row.shopName}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="standardPrice">
        <span>{{returnFloat(row.goodsPrices[0].amount)}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="goodskind">
        <span>{{(row.goodsKindList[1]||{}).typeName}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="inventory">
        <span>{{row.inventory===-1?'不限':row.inventory}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="listingAt">
        <span>{{row.listingAt+' ~ '+row.delistingAt}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="action">
        <span>{{['未上架','已上架','已下架'][row.channelGoodsStatus]}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="sold">
        <Poptip confirm
                title="你确定要下架吗？"
                @on-ok="ok(row)"
                @on-cancel="cancel">
          <i class="iconsys iconxiajia"
             title="下架"></i>
        </Poptip>
      </template>
    </Table>
    <Row type='flex'
         justify="end"
         style='padding: 20px'>
      <Col>
      <Page :total="pageObj.total"
            :page-size='pageObj.pageSize'
            :current='pageObj.pageIndex'
            :page-size-opts='[20,50,100,200]'
            show-total
            show-sizer
            @on-change='changePageIndex'
            @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getchannelGoodsList, editChannelList } from '@/api/merchandise/index'
import { getOrgAllTree } from '@/api/system/org'
import { returnFloat } from '@/libs/tools'
export default {
  name: 'game_currency_aio',
  components: { Treeselect },
  data () {
    return {
      searchObj: {
        shopId: null, // 门店id
        type: '' // 分类
      },
      returnFloat: returnFloat,
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      shopIdArr: [],
      options: [],
      optionsList: [],
      normalizer (node) {
        return {
          id: node.id,
          label: node.orgName,
          children: node.childList && node.childList.length ? node.childList : undefined
        }
      },
      clearable: false,
      channelId: { '1': '2', '2': '1', '3': '4' },
      sysGoodsId: this.$route.query.sysGoodsId,
      loading: false, // 加载的状态
      columns: [
        {
          title: '门店名称',
          slot: 'shopName',
          width: 200
        },
        {
          title: '商品标题',
          key: 'title'
        },
        {
          title: '游戏币分类',
          slot: 'goodskind'
        },
        {
          title: '平台价(元)',
          slot: 'standardPrice'
        },
        {
          title: '可售库存',
          slot: 'inventory'
        },
        {
          title: '上下架时间',
          slot: 'listingAt'
        },
        {
          title: '状态',
          slot: 'action'
        },
        {
          title: '操作时间',
          key: 'operatedAt'
        },
        {
          title: '操作',
          slot: 'sold',
          width: 150
        }
      ],
      tableData: []
    }
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'game_currency_aio') {
        if (this.shopIdArr.length || this.searchObj.shopId) {
          this.getList()
        }
      }
    }
  },
  // 计算属性
  computed: {
    tableHeight () {
      let height = this.tableData.length > 10 ? 580 : 0
      return height
    }
  },
  created () {
    this.getOrg()
  },
  methods: {
    getOrg () {
      getOrgAllTree({
        'merchantId': this.$store.state.user.merchantId,
        'orgType': 1,
        status: 1,
        perms: 'moms:product:coinview',
        id: this.$store.state.user.orgId
      }).then(res => {
        if (res.data.status === 200) {
          this.options = [res.data.data]
          this.shopIdArr = []
          this.filterData(this.options)
          if (this.shopIdArr.length) {
            this.getList()
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    filterData (data) {
      if (data) {
        data.forEach(ele => {
          if (ele.orgType === 1) {
            if (this.shopIdArr.indexOf(ele.id) < 0) {
              this.shopIdArr.push(ele.id)
            }
          } else {
            this.filterData(ele.childList)
          }
        })
      }
    },
    selectListd (data) {
      this.searchObj.shopId = data.id
      this.pageObj.pageIndex = 1
      this.getList()
    },
    // 获取列表
    getList () {
      this.loading = true
      getchannelGoodsList({
        merchantId: this.$store.state.user.merchantId,
        goodsKind: '01',
        offset: (this.pageObj.pageIndex - 1) * this.pageObj.pageSize,
        limit: this.pageObj.pageSize,
        shopIdList: this.searchObj.shopId ? [this.searchObj.shopId] : this.shopIdArr,
        channelId: this.channelId[this.$route.query.type],
        channelGoodsStatus: 1,
        sysGoodsId: this.$route.query.sysGoodsId
      }).then(res => {
        this.loading = false
        if (res.data.status === 200) {
          if (res.data.data) {
            this.tableData = res.data.data.goods || []
            this.pageObj.total = res.data.data.total
          } else {
            this.tableData = []
            this.pageObj.total = 0
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 祛除空格
    filterSpace () {

    },
    // 下架
    sold (row) {

    },
    // 选择分类
    seleted () {

    },
    // 查询
    search () {
      this.pageObj.pageIndex = 1
      if (this.shopIdArr.length || this.searchObj.shopId) {
        this.getList()
      }
    },
    jump (row) {
      this.$router.push({ name: 'game_currency_goods', query: { name: row.shopName, id: row.shopId } })
    },
    // 重置
    reset () {
      this.pageObj.pageIndex = 1
      this.searchObj.shopId = null
      if (this.shopIdArr.length || this.searchObj.shopId) {
        this.getList()
      }
    },
    // 上架
    skipAdd () {
      this.$router.push({ name: 'game_currency_putaway', query: { sysGoodsId: this.$route.query.sysGoodsId, type: this.$route.query.type } })
    },
    // 改变页码
    changePageIndex (pageIndex) {
      this.pageObj.pageIndex = pageIndex
      if (this.shopIdArr.length || this.searchObj.shopId) {
        this.getList()
      }
    },
    // 改变大小
    changePageSize (pageSize) {
      this.pageObj.pageSize = pageSize
      if (this.shopIdArr.length || this.searchObj.shopId) {
        this.getList()
      }
    },
    // 下架
    ok (row) {
      editChannelList({
        merchantId: this.$store.state.user.merchantId,
        channelGoodsId: row.channelGoodsId,
        updater: this.$store.state.user.userId,
        updaterName: this.$store.state.user.userName,
        listingType: 2
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('下架成功')
          // this.pageObj.pageIndex = 1
          this.getList()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    cancel () {

    },
    // 选择门店
    handleShop () {
      this.getList()
    },
    apiFinish () {

    }
  }
}
</script>
